<template>
  <div class="policy-detail-container">
    <el-card class="policy-card">
      <template #header>
        <div class="card-header">
          <span>政策详情表单</span>
        </div>
      </template>

      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
        <!-- 标题输入 -->
        <el-form-item label="标题" prop="title" class="form-item">
          <el-input
              v-model="formData.title"
              placeholder="请输入政策标题"
              clearable
              :maxlength="200"
              show-word-limit
          />
        </el-form-item>

        <!-- 正文编辑 -->
        <el-form-item label="正文" prop="content" class="form-item">
          <editor v-model="formData.content" :placeholder="'请输入政策正文内容'" :height="400" />
          <div class="editor-tip">支持富文本编辑，可插入图片、表格等内容</div>
        </el-form-item>

        <!-- 附件上传 -->
        <el-form-item label="附件" prop="annexId" class="form-item">
          <upload
              v-model="formData.annexId"
              :mode="'default'"
              :disabled="false"
              :text="formData.annexText"
              @onUploadSuccess="handleUploadSuccess"
          />
          <div class="upload-tip">支持上传的文件格式：gif,jpeg,jpg,png,psd,rar,zip,pdf,doc,docx,ppt,pptx,txt,xls,xlsx</div>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item class="form-actions">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import Editor from '/@/components/editor/index.vue';
import Upload from '/@/views/common/upload.vue';
import { required } from '/@/components/wigem/utils/validateForm';
import { useRoute } from 'vue-router';

// 表单数据
const formData = reactive({
  title: '', // 政策标题
  content: '', // 政策正文
  annexId: '', // 附件ID
  annexText: '' // 附件文本显示
});

// 表单引用
const formRef = ref();

// 表单验证规则
const formRules = computed(() => {
  return {
    title: required({
      required: true,
      maxLength: 200
    }),
    content: required({
      required: true,
      message: '请输入正文内容'
    }),
    annexId: required({
      required: true,
      message: '请上传附件'
    })
  };
});

// 处理附件上传成功
const handleUploadSuccess = (data) => {
  formData.annexText = data.fileName;
  ElMessage.success('附件上传成功');
};

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 这里添加表单提交的逻辑
      console.log('表单数据：', formData);
      ElMessage.success('表单提交成功');
      // 可以在这里调用API提交数据
    }
  });
};

// 取消操作
const handleCancel = () => {
  formRef.value.resetFields();
  ElMessage.info('已取消操作');
};

// 初始化函数
const init = () => {
  // 可以在这里进行页面初始化，例如从路由参数获取ID并加载数据
  const route = useRoute();
  const policyId = route.query.id;
  if (policyId) {
    // 这里添加根据ID加载数据的逻辑
    console.log('加载政策ID：', policyId);
  }
};

// 页面加载时初始化
init();
</script>

<style scoped>
.policy-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.policy-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.form-item {
  margin-bottom: 24px;
}

.editor-tip,
.upload-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}

.form-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.form-actions .el-button {
  margin-right: 12px;
}

/* 富文本编辑器容器样式 */
:deep(.editor-container) {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

/* 解决附件上传组件宽度问题 */
:deep(.input-with-select) {
  width: 100%;
}
</style>